<template>
  <el-dialog
    v-model="props.dialogVisible"
    :title="props.dialogForm?.title"
    :width="props.dialogForm?.width"
    :show-close="false"
    :close-on-click-modal="false"
  >
    <el-form :model="purForm" :rules="rules" ref="purFormRef">
      <el-form-item label="角色名称" prop="roleName">
        <el-input
          v-model="purForm.roleName"
          autocomplete="off"
          style="width: 100%"
          maxlength="10"
          show-word-limit
          placeholder="请输入角色名称"
        />
      </el-form-item>

      <el-form-item label="备注信息">
        <el-input
          v-model="purForm.remark"
          autocomplete="off"
          style="width: 100%"
          maxlength="20"
          show-word-limit
          placeholder="请输入备注信息"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel(purFormRef)">取消</el-button>
        <el-button type="primary" @click="submitForm(purFormRef)">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import { ref, reactive, defineAsyncComponent, watch, computed } from 'vue'
import { editRole, addRole } from '/@/api/setting/index'

const props = defineProps({
  dialogVisible: Boolean,
  dialogForm: Object,
  dialogDetail: Object
})
const emit = defineEmits(['cancel', 'submit'])
const formLabelWidth = ref('95px')
const purFormRef = ref<FormInstance>()
const purForm = ref<any>({
  roleName: '',
  remark: ''
})

watch(
  () => props.dialogVisible,
  () => {
    if (!props?.dialogDetail?.id) {
      purForm.value = {}
    } else {
      purForm.value = JSON.parse(JSON.stringify(props?.dialogDetail))
    }
  },
  { immediate: true }
)

const rules = reactive<FormRules>({
  roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }]
})

const cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit('cancel')
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (!props?.dialogDetail?.id) {
        addRole(purForm.value).then((res) => {
          if (res.code == 0) {
            ElMessage.success(`添加成功！`)
            emit('submit')
          }
        })
      } else {
        purForm.value.id = props?.dialogDetail?.id
        delete purForm.value.companyId
        delete purForm.value.createTime
        delete purForm.value.updateTime
        editRole(purForm.value).then((res) => {
          if (res.code == 0) {
            ElMessage.success(`编辑成功！`)
            emit('submit')
          }
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
</script>
<style scoped lang="scss">
.elrowClass {
  margin-bottom: 16px;
}

.tips {
  font-size: 13px;
  font-weight: 400;
  line-height: 21px;
  color: rgba(140, 140, 140, 1);
  text-align: left;
}
</style>
<style>
.el-dialog__title {
  font-size: 20px !important;
  font-weight: 700 !important;
}
</style>
